import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation, useNavigate } from 'react-router-dom';
import HomePage from '../pages/HomePage/HomePage';
import PatientCircle from '../pages/PatientCircle/PatientCircle';
import Video from '../pages/Video/Video';
import SearchPage from '../pages/SearchPage/SearchPage';
import ListItemDetail from '../pages/ListItemDetail/ListItemDetail';
import CustomTabBar from '../components/TabBar/TabBar';

const TabBarWrapper: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  
  const getActiveKey = () => {
    switch (location.pathname) {
      case '/': return 'home';
      case '/circle': return 'circle';
      case '/video': return 'video';
      default: return 'home';
    }
  };

  const handleTabChange = (key: string) => {
    switch (key) {
      case 'home':
        navigate('/');
        break;
      case 'circle':
        navigate('/circle');
        break;
      case 'video':
        navigate('/video');
        break;
    }
  };

  // 只在主页面显示标签栏
  if (location.pathname === '/search' || location.pathname.startsWith('/detail/')) {
    return null;
  }

  return (
    <CustomTabBar 
      activeKey={getActiveKey()} 
      onChange={handleTabChange} 
    />
  );
};

const AppRouter: React.FC = () => {
  return (
    <Router>
      <div className="app">
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/circle" element={<PatientCircle />} />
          <Route path="/video" element={<Video />} />
          <Route path="/search" element={<SearchPage />} />
          <Route path="/detail/:id" element={<ListItemDetail />} />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
        
        <TabBarWrapper />
      </div>
    </Router>
  );
};

export default AppRouter;
